import React, { Component } from "react";
import Header from "./components/Header/Header";
import List from "./components/List/List";
import Footer from "./components/Footer/Footer";
import "./App.css";
import PubSub from "pubsub-js";
export default class App extends Component {
  
  state = {
    // 将本地的数据获取赋值给list
    list: JSON.parse(localStorage.getItem("todos")) || [],
  };
  componentDidMount() {
    this.checkToken1 = PubSub.subscribe("allcheck", (msg, data) => {
      this.getTodosStatus(data);
    });
    this.checkToken2 = PubSub.subscribe("IdUpdate", (msg, id) => {
      this.getTodoIdUpdate(id);
    });
     this.checkToken3 = PubSub.subscribe("IdDelete", (msg, id) => {
       this.getTodoIdDelete(id);
     });


  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.checkToken1);
    PubSub.unsubscribe(this.checkToken2);
     PubSub.unsubscribe(this.checkToken3);
  }

  componentDidUpdate() {
    // 生命周期钩子函数中的this都是当前组件的实例
    localStorage.setItem("todos", JSON.stringify(this.state.list));
  }

  // 获取输入框返回的数据，添加到state
  getTdoName = (todoName) => {
    console.log(this.state);
    // console.log(todoName);
    // 根据todoname创建对象
    const obj = {
      todoName,
      id: Date.now(),
      isDone: false,
    };
    this.state.list.push(obj);
    this.setState({
      list: this.state.list,
    });
    // 更新数据存储到localstorage中
    // localStorage.setItem("todos", JSON.stringify(this.state.list));
  };
  // 获取修改状态的标签id来修改数据中的状态
  getTodoIdUpdate = (id) => {
    // console.log(id);
    this.state.list.forEach((item) => {
      if (item.id === id) {
        item.isDone = !item.isDone;
      }
    });
    this.setState({
      list: this.state.list,
    });
    // 更新数据存储到localstorage中
    // localStorage.setItem("todos", JSON.stringify(this.state.list));
  };
  // 点击删除一条数据
  getTodoIdDelete = (id) => {
    console.log(id);
    const newlist = this.state.list.filter((item) => item.id !== id);
    this.setState({
      list: newlist,
    });
    // 更新数据存储到localstorage中
    // localStorage.setItem("todos", JSON.stringify(newlist));
  };
  getTodosStatus = (checked) => {
    // console.log(checked)
    this.state.list.forEach((item) => (item.isDone = checked));
    this.setState({
      list: this.state.list,
    });
    // 更新数据存储到localstorage中
    // localStorage.setItem("todos", JSON.stringify(this.state.list));
  };
  // 删除所有数据
  deleteAllDoneTodos = () => {
    const newList = this.state.list.filter((item) => !item.isDone);
    this.setState({
      list: newList,
    });
    // 更新数据存储到localstorage中
    // localStorage.setItem("todos", JSON.stringify(newList));
  };
  render() {
    const { list } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header getTdoName={this.getTdoName}></Header>
          {list.length ? (
            <div>
              <List
                list={list}
                // getTodoIdUpdate={this.getTodoIdUpdate}
                // getTodoIdDelete={this.getTodoIdDelete}
              ></List>
              <Footer
                list={list}
                // getTodosStatus={this.getTodosStatus}
                deleteAllDoneTodos={this.deleteAllDoneTodos}
              ></Footer>
            </div>
          ) : (
            <h1>恭喜您,没有任务</h1>
          )}
        </div>
      </div>
    );
  }
}
